import React, { useEffect } from "react";
import { useNavigate, Navigate } from "react-router-dom";

export default function My(props) {
  // 1- 通过以下方法可以实现对身份的验证
  // const navigate = useNavigate();
  // useEffect(() => {
  //   if (!localStorage.getItem("token")) {
  //     navigate("/login");
  //   }
  // }, []);


  //2.
  // if (!localStorage.getItem("token")) {
  //   return <Navigate to={"/login"}></Navigate>;
  // }
  // 2- 通过以上方法进行验证有两个问题
  // 2-1:代码复用性不好
  // 2-2:效率低



  // 3- 解决方案：自定义拦截器
  const navigate = useNavigate();

  return (
    <div>
      <h3>个人中心</h3>
      <p>欢迎{localStorage.getItem('token')}的到来</p>
      <button onClick={() => {
        // localStorage.removeItem('token');
        localStorage.clear();
        navigate('/login');
      }}>退出</button>
      </div>
    )
}
